<template>
  <div class="echartPage">
    <div class="echart1">
      <echart1></echart1>
    </div>
    <div class="echart2">
      <echart2></echart2>
    </div>
    <div class="echart3">
      <echart3></echart3>
    </div>
    <div class="echart4">
      <echart4></echart4>
    </div>
  </div>
</template>

<script>
import echart1 from 'sysComponents/customCom/global/echart'
import echart2 from 'sysComponents/customCom/global/echart2'
import echart3 from 'sysComponents/customCom/global/echart3'
import echart4 from 'sysComponents/customCom/global/echart4'
export default {
  components :{
    echart1,
    echart2,
    echart3,
    echart4
  }
}
</script>

<style type="styleesheet/scss" lang="scss" scoped>
.echartPage{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  box-sizing: padding-box;
  margin: 1px;
  .echart1{
    width: 45%;
    height: 42%;
    padding: 20px 10px;
    border: #ffe6f6 2px solid ;
    border-radius: 5px;
  }
  .echart2{
    width: 45%;
    height: 42%;
    padding: 20px 10px;
    border: #ffe6f6 2px solid ;
    border-radius: 5px;
  }
  .echart3{
    width: 45%;
    height: 42%;
    padding: 20px 10px;
    border: #ffe6f6 2px solid ;
    border-radius: 5px;
    margin-bottom: 92px;
  }
  .echart4{
    width: 45%;
    height: 42%;
    padding: 20px 10px;
    border: #ffe6f6 2px solid ;
    border-radius: 5px;
    margin-bottom: 92px;
  }
}
</style>
